@require '~styles/variables'
@require '~styles-lib/mixins'

.chat-window-message
	position: relative
	margin-bottom: 3px
	line-height: $font-size-base * 1.25

	@media $media-xs
		font-size: $font-size-small
		line-height: $font-size-small * 1.25

	&-avatar
		position: absolute
		left: 0
		top: 0
		width: 35px
		z-index: 1

		& > img
			img-circle()

	&-container
		margin-left: 35px + 20px

	&-byline
		margin-bottom: 5px

	&-user
		text-overflow()
		display: inline-block
		max-width: 200px
		font-weight: bold
		vertical-align: bottom

	&-username
		theme-prop('color', 'fg-muted')
		font-size: $font-size-tiny

	&-time
		theme-prop('color', 'fg-muted')
		margin-left: 5px
		font-size: $font-size-tiny

	// Some different styling for the fade collapse.
	.fade-collapse-collapsed
		theme-prop('border-bottom-color', 'light')
		margin-bottom: 5px
		border-bottom-width: 1px
		border-bottom-style: dashed

		&::before
			theme-prop('background', 'darker', true)
			max-height: 5px !important

	// Only shown during fade-collapse of messages that are too long.
	.hidden-text-expander
		margin-left: 35px + 10px + $chat-room-window-padding

	&-mod-tools
		display: none

		// Only show mod tools on larger screens
		@media $media-sm-up
			change-bg('darker')
			position: absolute
			top: 0
			right: 0
			padding: 2px
			z-index: 2

			../:hover &
				display: block

	&-content
		display: block
		// If we don't break words then it can make the window too large to try
		// to fit in the text. We also try to hyphenate.
		// Note: hyphens only works on Chrome in Mac and Android.
		// Luckily this is mostly where it matters.
		word-wrap: break-word
		hyphens: auto
		// Try to limit the effects of what zalgo text can do to chat.
		overflow: hidden

	// System chat messages.
	// Robo-Jolt and such.
	.chat-msg-type-system
		theme-prop('color', 'gray')
		font-style: italic

		span
			font-style: italic
